
<link href="__LIBS__/bootstrap-table/bootstrap-table.min.css" type="text/css" rel="stylesheet">

<!-- 首条公告 -->
<div class="col-md-5 col-lg-5 col-sm-5">
    <div class="box box-danger">
        <div class="box-header with-border">
            <h5 class="box-title">最新公告</h5>
        </div>
        <div class="box-body">
            <p>我是最新公告的内容</p>
            <p>我是最新公告的内容</p>
            <p>我是最新公告的内容</p>
            <p>我是最新公告的内容</p>
            <p>我是最新公告的内容</p>
            <p>我是最新公告的内容</p>
            <p>我是最新公告的内容</p>
            <p>我是最新公告的内容</p>
            <p>我是最新公告的内容</p>
            <p>我是最新公告的内容</p>
        </div>
    </div>
</div>


<!-- 公告列表 -->
<div class="col-md-3 col-lg-3 col-sm-3">
    <div class="box box-danger">
        <div class="box-header with-border">
            <h5 class="box-title">公告列表</h5>
        </div>
        <div class="box-body">
            <table class="bootstrap-table col-sm-5" id="notice_list"></table>
        </div>
    </div>
</div>

<script type="text/javascript" src="__LIBS__/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="__LIBS__/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">

    $('#notice_list').bootstrapTable({
        data: {$data},
        pagination: true,
        dataField: 'total',
        pageList: [10, 20 ,50],
        columns: [
            {
                field: 'date',
                title: '日期'
            },
            {
                field:'title',
                title:'公告标题',
                formatter:function () {
                    var state
                        state= "<span class='badge bg-red' style='padding:5px 10px;'>标题</span>";
                    return state;
                }
            }
        ],
        height: 500,
        search: true,
        showColumns: true,
        showToggle: true,
        idFieldId: 'uid',
        clickToSelect: true,
        toolbar: ''
    })
</script>